<template>
    <div>
      <!--1-->
      <el-row class="nav_a_top">
                        <el-col :span="12"><div @click="fanhui" class="grid-content bg-purple-light"><div class="el-icon-back fs20"></div></div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple-light floatright"><div>添加餐柜</div></div></el-col>
      </el-row>
      <div class="block martop15">
            <span class="demonstration">选择日期：</span>
            <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
        </div>
        <!--2-->
        <div class="martop20">
            <div>商品一：</div>
            <form class="goods_one martop20">
                <div class="martop15">
                    <input class="marleft" type="text" placeholder="商品名称">
                    <input class="marleft" type="text" placeholder="商品价格（元）">
                    <select name="" id="" class="marleft">
                        <option value="">美地星球1</option>
                        <option value="">美地星球2</option>
                    </select>
                    <input type="text" placeholder="商品图片" class="marleft">
                    <input type="submit" value="上传" class="marleft shangchaun">
                </div>
                <div class="martop20">
                    <input class="marleft" type="text" placeholder="我是商品说明">
                    <input class="marleft" type="text" placeholder="我是备注">
                </div>
            </form>
            <div class="xiugai">修改</div>
        </div>
         <!--3-->
        <div class="martop20">
            <div>商品二：</div>
            <form class="goods_one martop20">
                <div class="martop15">
                    <input class="marleft" type="text" placeholder="商品名称">
                    <input class="marleft" type="text" placeholder="商品价格（元）">
                    <select name="" id="" class="marleft">
                        <option value="">美地星球1</option>
                        <option value="">美地星球2</option>
                    </select>
                    <input type="text" placeholder="商品图片" class="marleft">
                    <input type="submit" value="上传" class="marleft shangchaun">
                </div>
                <div class="martop20">
                    <input class="marleft" type="text" placeholder="我是商品说明">
                    <input class="marleft" type="text" placeholder="我是备注">
                </div>
            </form>
            <div class="xiugai">确认</div>
        </div>
        <!--4-->
        <div class="martop40">新增商品</div>
        <!--5-->
        <div class="tijiao">提交</div>
    </div>
</template>
<script>
export default{
    name:"addshangpin",
    data(){
        return{
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            value1: '',
            value2: '',
        }
    },
    methods:{
            fanhui:function(){
                this.$store.state.manage=true;
                this.$store.state.add=false;
            },
        }
}
</script>
<style scoped>
.martop10{margin-top: 10px;}
.martop15{margin-top: 15px;}
.martop20{margin-top: 20px;}
.marleft{margin-left: 10px;}
/*1*/
.nav_a_top{height: 40px;background-color: white;padding: 10px 10px 0px 10px;}
.floatright{float: right;margin-right: 30px;}
.fromtop{margin-top: 30px;}
/*2 3*/
.goods_one{width: 850px;height: 140px;background-color: white;padding: 15px 10px;box-sizing: border-box;display: inline-block;border: 1px solid #bbb;}
.goods_one input{padding: 4px 0px 4px 7px;}
.goods_one select{padding: 4px 0px 4px 7px;}
.goods_one .shangchaun{width: 65px;text-align: center;border-radius: 6px;box-shadow: none;}
.xiugai{display: inline-block;width: 100px;height: 45px;background-color: white;line-height: 45px;text-align: center;border: 1px solid #bbb;border-radius: 10px;position: relative;top: -23px;right: -60px;}
/*4*/
.martop40{margin-top: 40px;;width: 100px;height: 45px;background-color: white;line-height: 45px;text-align: center;border: 1px solid #bbb;border-radius: 10px;}
/*5*/
.tijiao{margin-top: 40px;;width: 200px;height: 50px;background-color: white;line-height: 50px;text-align: center;border: 1px solid #bbb;border-radius: 10px;position: relative;left: 50%;margin-left: -50px;}
</style>